import { useToggle } from 'ahooks';
import { SelectedOutline, CloseOutline } from '@pxxtech/icons';
import { Switch, Space } from '@pxxtech/mobile';
import { DemoBlock } from 'demos';

export default () => {
  const [checked, { toggle: toggleChecked }] = useToggle(false);
  const beforeChange = (): Promise<any> => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(void 0);
      }, 1000);
    });
  };

  return (
    <>
      <DemoBlock title="基础用法">
        <Switch />
      </DemoBlock>
      <DemoBlock title="禁用状态">
        <Space>
          <Switch disabled />
          <Switch disabled defaultChecked />
        </Space>
      </DemoBlock>
      <DemoBlock title="加载状态">
        <Switch loading />
      </DemoBlock>
      <DemoBlock title="异步">
        <Space wrap>
          <Switch defaultChecked beforeChange={() => beforeChange()} />
        </Space>
      </DemoBlock>
      <DemoBlock title="受控组件">
        <Switch
          checked={checked}
          onChange={(checked) => {
            toggleChecked(checked);
          }}
        />
      </DemoBlock>
      <DemoBlock title="有默认值">
        <Switch defaultChecked />
      </DemoBlock>
      <DemoBlock title="文字和图标">
        <Space wrap>
          <Switch uncheckedText="关" checkedText="开" />
          <Switch
            checkedText={<SelectedOutline />}
            uncheckedText={<CloseOutline />}
          />
          <Switch uncheckedText="0" checkedText="1" />
        </Space>
      </DemoBlock>
      <DemoBlock title="自定义样式">
        <Switch defaultChecked style={{ '--checked-color': '#00b578' }} />
      </DemoBlock>
    </>
  );
};
